<template>
    <div class="login">
        <div class="d-flex">
            <el-card class="box-card" shadow="hover">
                <h1 style="margin: 0px; text-align: center">登录</h1>
                <div class="form">
                    <el-form :model="loginForm" label-position="left" label-width="70px" :rules="rules"
                             ref="loginFormRef">
                        <el-form-item label="用户名" prop="loginName">
                            <el-input v-model="loginForm.loginName"/>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="loginForm.password" autocomplete="off"/>
                        </el-form-item>
                        <el-form-item label="验证码" prop="captchaCode" style="width: 350px">
                            <el-input v-model="loginForm.captchaCode" autocomplete="off" style="flex: 1"/>
                            <el-image style="width: 100px; height: 50px; margin-left: 10px" :src="data.captchaImage"
                                      :fit="fit"
                                      @click="generateCaptchaCode"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" style="width: 100%" round native-type="submit"
                                       @click.prevent="submitLogin">登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import {onMounted, reactive, ref} from "vue";
import {login, info} from "@/api/admin/admin";
import {generateCaptcha} from "@/api/captcha/captcha";
import {setToken, setUserInfo} from "@/utils/auth";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

export default {
    setup() {
        const loginForm = reactive({
            loginName: '',
            password: '',
            captchaCode: '',
            captchaKey: ''
        })
        const data = reactive({
            captchaImage: ''
        })
        const router = useRouter();
        const rules = reactive({
            loginName: [
                {
                    required: true,
                    message: "请输入登录名称",
                    trigger: "blur",
                },
            ],
            password: [
                {
                    required: true,
                    message: "请输入密码",
                    trigger: "blur",
                },
            ],
            captchaCode: [
                {
                    required: true,
                    message: "请输入验证码",
                    trigger: "blur",
                },
            ],
        })
        const loginFormRef = ref(null)
        /**
         * 登录
         * @param formEl
         */
        const submitLogin = async () => {
            loginFormRef.value.validate((valid) => {
                if (!valid) {
                    return false
                }
                login(loginForm).then(res => {
                    setToken(res.data)
                    currentUserInfo()
                })
            })
        }

        /**
         * 获取用户信息
         * @returns {Promise<void>}
         */
        const currentUserInfo = async () => {
            info().then(res => {
                setUserInfo(res.data)
                ElMessage({
                    message: '登录成功',
                    type: 'success',
                })
                setTimeout(function () {
                    router.push("/index")
                }, 2000)
            })
        }

        /**
         * 获取验证码
         * @returns {Promise<void>}
         */
        const generateCaptchaCode = async () => {
            generateCaptcha().then(res => {
                data.captchaImage = "data:image/png;base64," + res.data.captchaImage
                loginForm.captchaKey = res.data.captchaKey
            })
        }

        onMounted(() => {
            generateCaptchaCode()
        })
        return {
            loginForm,
            rules,
            submitLogin,
            loginFormRef,
            data,
            generateCaptchaCode
        }
    }
}


</script>

<style scoped>
.login {
    height: 100vh;
    width: 100vw;
    background: #a0f1ea;
    background-size: cover;
}

.form {
    padding: 1rem 0rem;
}

.d-flex {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form .el-button--medium.is-round {
    padding: 0.8rem 5rem;
    font-size: 16px;
}

.login .el-card {
    width: 28%;
    padding: 0 2rem;
    background: white;
    opacity: 0.93;
    border-radius: 1rem;
}

.login .el-card .el-form-item__error {
    color: #df0000;
}

.login .el-card .el-form-item.is-error .el-input__inner {
    color: #df0000;
}
</style>